import { ReactComponentExt } from '@helpers/ReactExt'
import { BaseProps } from '@store/store'
import { Button, Col, Icon, Modal, Row } from 'antd'
import * as React from 'react'
import NavigationPrompt from 'react-router-navigation-prompt'

// tslint:disable-next-line:no-empty-interface
export interface NavigationPromptWrapperProps extends BaseProps {
  when: boolean,
  message: string,
  extraCheck: (nextLocation?: BaseProps['location']) => boolean,
}

export class NavigationPromptWrapper extends ReactComponentExt<NavigationPromptWrapperProps, {}> {
  public init(): void {
    // todo
  }

  public componentDidMount() {
    // todo
  }

  public render() {
    const { message } = this.props
    return (
      <NavigationPrompt when={this.handleWhen}>
        {
          ({ onConfirm, onCancel, isActive }) => (
            <Modal
              visible={!!isActive}
              footer={null}
              closable={false}
            >
              <React.Fragment>
                <Row style={{ paddingTop: '40px', paddingBottom: '40px' }}>
                  <Col>
                    <Icon
                      type='exclamation-circle'
                      style={{ fontSize: '20px', marginRight: '10px', color: '#faad14' }}
                    />
                    {message}
                  </Col>
                </Row>
                <Row>
                  <Col offset={3}>
                    <Button onClick={onCancel} style={{ marginRight: '10px' }}>取消</Button>
                    <Button type='primary' onClick={onConfirm}>确定</Button>
                  </Col>
                </Row>
              </React.Fragment>
            </Modal>
          )
        }
      </NavigationPrompt>
    )
  }

  private handleWhen(crntLocation: BaseProps['location'], nextLocation?: BaseProps['location']): boolean {
    return this.props.when && !this.props.extraCheck(nextLocation)
  }

}
